<template>
    <div class="app-container">
        <el-form :model="queryParams" :inline="true" label-width="68px">
           <el-form-item class="with-220">
                <el-date-picker
                    clearable
                    v-model="queryParams.startAndEndDate"
                    type="daterange"
                    range-separator="至"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                />
           </el-form-item>
           <el-form-item  prop="status">
               <el-tree-select
                 v-model="queryParams.serviceId"
                 :data="deptTreeData"
                 :props="{ value: 'id', label: 'label', children: 'children' }"
                 :render-after-expand="false"
                 show-checkbox
                 value-key="id"
                 check-strictly
                 placeholder="请选择服务区"
                 @check="changeServiceArea"
                 style="width: 180px"
                 clearable
             />
            </el-form-item>
           <el-form-item>
                <el-select v-model="queryParams.shopId" clearable placeholder="请选择店铺名称" style="width: 160px">
                    <el-option
                      v-for="item in shopOption"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                </el-select>
           </el-form-item>
           <el-form-item>
                <el-select v-model="queryParams.handlerUser" clearable placeholder="请选择一个巡检人" style="width: 160px">
                    <el-option v-for="item in handlerList" :label="item.userName" :value="item.userId" :key="item.userId"></el-option>
                </el-select>
           </el-form-item>
           <el-form-item>
             <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
             <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <!-- <div class="download-btn"> -->
            <!-- <el-button :icon="Download" size="large" v-hasPermi="['remoteInspection:dashBoard:download']">PDF下载</el-button> -->
        <!-- </div> -->
        <div class="dashBoard" v-loading="loading">
            <div class='chart-list'>
                <div  ref="coverRateRef" class="chart-content"></div>
                <ul>
                    <li>
                        <span>{{ totalData.shopTotal || 0 }}</span>
                        <span>门店总数</span>
                    </li>
                    <li>
                        <span>{{ totalData.coverTotal || 0 }}</span>
                        <span>覆盖数</span>
                    </li>
                </ul>
            </div>
            <div class='chart-list' >
                <div  ref="finishRateRef" class="chart-content"></div>
                <ul>
                    <li>
                        <span>{{ totalData.taskTotal || 0 }}</span>
                        <span>任务总数</span>
                    </li>
                    <li>
                        <span>{{ totalData.taskAccomplishNumber || 0 }}</span>
                        <span>完成任务数</span>
                    </li>
                    <li>
                        <span style="color: red;">{{ totalData.taskUnfinishedNumber || 0 }}</span>
                        <span>任务未完成数</span>
                    </li>
                    <li>
                        <span style="color: red;">{{ parseInt(totalData.taskUnfinishedRatio * 100) + '%' }}</span>
                        <span>任务未完成率</span>
                    </li>
                </ul>
            </div>
            <div class='chart-list'>
                <div  ref="checkItemRateRef" class="chart-content" ></div>
                <ul>
                    <li>
                        <span>{{ totalData.spotCheckTotal || 0 }}</span>
                        <span>点检项总数</span>
                    </li>
                    <li>
                        <span >{{ totalData.spotCheckAccomplishNumber || 0 }}</span>
                        <span>点检项完成数</span>
                    </li>
                    <li>
                        <span style="color: red;">{{ totalData.disqualificationNumber || 0 }}</span>
                        <span>不合格数</span>
                    </li>
                    <li>
                        <span style="color: red;">{{ parseInt(totalData.disqualificationRatio * 100) + '%'}}</span>
                        <span>不合格率</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted } from 'vue'
import { Download } from '@element-plus/icons-vue'
import useUserStore from '@/store/modules/user'
import { listUser } from "@/api/system/user";
import { getShopList } from "@/api/system/shop";
import { getPanelData } from "@/api/remoteInspection/dashBoard";

const loading = ref(false);
const coverRateRef = ref(null)
const finishRateRef = ref(null)
const checkItemRateRef = ref(null)
const handlerList = ref([])
const shopOption = ref([])
const totalData = ref({})
const queryParams = reactive({
    startAndEndDate: [],
    serviceId: "",
    shopId: "",
    handlerUser: "",
})

onMounted(()=>{
    getDashBoardData()
    getHandlerData()
})

//服务区下来数据
const deptTreeData = computed(()=>{
   return useUserStore().deptTreeData
})

// 切换服务区-获取店铺下拉数据
const changeServiceArea = (value) =>{
    let params = {
        pageNum: 1,
        pageSize: 10000,
        serviceId: value.id
    }
    getShopList(params).then(res =>{
        shopOption.value = []
        res.rows.forEach(item =>{
            shopOption.value.push({
                value: item.shopId,
                label: item.shopName
            })
        })
    })
    
}

// 获取巡检人下拉数据
const getHandlerData = () =>{
    listUser(queryParams).then(res =>{
        res.rows.forEach(item => {
            handlerList.value.push({
                userId: item.userId,
                userName: item.userName
            })
        });
    })
}

//获取仪表盘数据
const getDashBoardData = () =>{
    let params = {
        serviceId: queryParams.serviceId,
        shopId: queryParams.shopId,
        handlerUser: queryParams.handlerUser,
        startDateTime: queryParams.startAndEndDate[0] || '',
        endDateTime: queryParams.startAndEndDate[1] || '',
    }
    loading.value = true
    getPanelData(params).then(res =>{
        totalData.value = res.data
        initChart(totalData.value)
        loading.value = false
    }).catch(err =>{loading.value = false})
}

// 搜索
const handleQuery = () =>{
    getDashBoardData()
}

// 重置
const resetQuery= () =>{
    Object.assign(queryParams, {
        startAndEndDate: [],
        serviceId: "",
        shopId: "",
        handlerUser: "",
    })
    getDashBoardData()
}

//设置图表option项
const setOption = (title,value = 0) =>{
    let options = {
        tooltip: {
        formatter: '{a} <br/>{b} : {c}%'
        },
        series: [
          {
            name: 'Pressure',
            type: 'gauge',
            progress: {
              show: true
            },
            detail: {
              valueAnimation: true,
              formatter: '{value}'
            },
            data: [
              {
                value: parseInt(value * 100),
                name: title
              }
            ]
          }
        ]
    }
    return options
}
// 初始化Echart图标
const initChart = (params) =>{
    let coverChart = echarts.init(coverRateRef.value)
    let finishChart = echarts.init(finishRateRef.value)
    let checkItemChart = echarts.init(checkItemRateRef.value)

    coverChart.setOption(setOption('覆盖率', params.coverRatio))
    finishChart.setOption(setOption('任务完成率', params.taskAccomplishRatio))
    checkItemChart.setOption(setOption('点检项完成率', params.spotCheckAccomplishRatio))
    
    window.onresize = function () {
        coverChart.resize();
        finishChart.resize();
        checkItemChart.resize();
    }; 
}

</script>

<style lang="scss" scoped>
.app-container{
    // height: calc(100vh - 84px);
    // background-color: #eee;
    .el-form{
        // background-color: #fff;
        // padding: 20px;
        // border-radius: 5px;
    }
    .download-btn{
        margin: 20px 0;
    }
    .dashBoard{
        background-color: #fff;
        display: flex;
        justify-content: space-around;
        border-radius: 5px;
        padding-bottom: 40px;
        .chart-list{
            ul{
                li{
                    text-align: center;
                    margin-bottom: 20px;
                    display: flex;
                    flex-direction: column;
                    span{
                        font-weight: 500;
                    }
                }
            }
            .chart-content{
                width: 300px;
                height: 300px;
            }
        }
    }
}
</style>